<template>
  <div>
    <headline :headline="'商品信息'" />
    <el-form ref="ruleForm" class="base-info" :model="formData" label-width="150px" size="mini" label-position="left">
      <el-row :gutter="40" style="width: 100%">
        <el-col :span="24">
          <strong>分类信息</strong>
        </el-col>
        <el-col :span="12" :xl="8">
          <el-form-item label="京东平台分类" prop="formData" :rules="[{ required: true, validator: channelCategoryRules, trigger: 'blur' }]">
            <el-cascader
              v-model="channelCategory"
              :props="{ children: 'children', label: 'categoryName', expandTrigger: 'hover', value: 'categoryId' }"
              :options="channelOptions"
              separator=">"
              disabled
              filterable
              clearable
              collapse-tags
            />
          </el-form-item>
        </el-col>
        <el-col :span="12" :xl="8">
          <el-form-item label="店铺分类" prop="formData" :rules="[{ required: true, validator: initResourceIdRules, trigger: 'blur' }]">
            <el-cascader
              ref="cascader"
              v-model="initResourceId"
              :props="{ children: 'children', label: 'categoryName', expandTrigger: 'hover', value: 'categoryId', multiple: true }"
              :options="categoryOptions"
              separator=">"
              :disabled="isDisabled"
              filterable
              clearable
              @change="handleChange"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12" :xl="8">
          <el-form-item label="京东品牌" prop="formData" :rules="[{ required: true, validator: channelBrandIdRules, trigger: 'blur' }]">
            <BrandName
              ref="bransName"
              v-model="channelInfo.channelBrandId"
              :disabled="isDisabled"
              :channel-id="channelInfo.channelId"
              :channel-info="channelInfo"
            />
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <strong>基础信息</strong>
        </el-col>
        <el-col v-if="increased" :span="12" :xl="8">
          <el-form-item label="UPC(不带校验码)" prop="upcWoCd" :rules="{ required: true, message: `请输入UPC(不带校验码)`, trigger: 'blur' }">
            <el-input v-model="formData.upcWoCd" disabled />
          </el-form-item>
        </el-col>
        <el-col v-if="increased" :span="12" :xl="8">
          <el-form-item label="UPC" prop="upc" :rules="{ required: true, message: `请输入UPC`, trigger: 'blur' }">
            <el-input v-model="formData.upc" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="12" :xl="8">
          <el-form-item label="高度" :prop="increased ? 'spuHeight' : 'chgSpuHeight'" :rules="{ required: true, message: `请输入高度`, trigger: 'blur' }">
            <el-input v-model="formData[increased ? 'spuHeight' : 'chgSpuHeight']" :disabled="isDisabled">
              <span slot="suffix" class="suffix">mm</span>
            </el-input>
            <el-popover style="margin-left: 15px" placement="bottom" trigger="click">
              <component :is="'specifications'" />
              <i slot="reference" class="el-icon-question" />
            </el-popover>
          </el-form-item>
        </el-col>

        <el-col :span="12" :xl="8">
          <el-form-item label="宽度" :prop="increased ? 'spuWidth' : 'chgSpuWidth'" :rules="{ required: true, message: `请输入宽度`, trigger: 'blur' }">
            <el-input v-model="formData[increased ? 'spuWidth' : 'chgSpuWidth']" :disabled="isDisabled">
              <span slot="suffix" class="suffix">mm</span>
            </el-input>
            <el-popover style="margin-left: 15px" placement="bottom" trigger="click">
              <component :is="'specifications'" />
              <i slot="reference" class="el-icon-question" />
            </el-popover>
          </el-form-item>
        </el-col>

        <el-col :span="12" :xl="8">
          <el-form-item label="深度" :prop="increased ? 'spuLength' : 'chgSpuLength'" :rules="{ required: true, message: `请输入深度`, trigger: 'blur' }">
            <el-input v-model="formData[increased ? 'spuLength' : 'chgSpuLength']" :disabled="isDisabled">
              <span slot="suffix" class="suffix">mm</span>
            </el-input>
            <el-popover style="margin-left: 15px" placement="bottom" trigger="click">
              <component :is="'specifications'" />
              <i slot="reference" class="el-icon-question" />
            </el-popover>
          </el-form-item>
        </el-col>

        <el-col :span="12" :xl="8">
          <el-form-item label="毛重" :prop="increased ? 'spuWeight' : 'chgSpuWeight'" :rules="{ required: true, message: `请输入毛重`, trigger: 'blur' }">
            <el-input v-model="formData[increased ? 'spuWeight' : 'chgSpuWeight']" :disabled="isDisabled" @input="spuWeightInput" @change="spuWeightChange">
              <span slot="suffix" class="suffix">kg</span>
            </el-input>
            <el-popover style="margin-left: 15px" placement="bottom" trigger="click">
              <component :is="'skuWeight'" />
              <i slot="reference" class="el-icon-question" />
            </el-popover>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import headline from '@/views/coi/components/headline.vue'
import BrandName from '@/views/coi/components/BrandName.vue'
import specifications from '@/views/coi/schedule/components/fieldPrompt/specifications.vue'
import skuWeight from '@/views/coi/schedule/components/fieldPrompt/skuWeight.vue'
import { queryTreeList, queryChannelTreeList } from '@/api/coi/onlineTaskAPI/sku'
import { getFathersById, handleId } from '@/utils/processingData'

export default {
  components: {
    headline,
    BrandName,
    specifications,
    skuWeight
  },
  props: {
    isDisabled: {
      type: Boolean,
      default: true
    },
    formData: {
      type: Object,
      default() {
        return {}
      }
    },
    channelInfo: {
      type: Object,
      default() {
        return {}
      }
    },
    increased: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      categoryOptions: [],
      initResourceId: [],
      channelOptions: [],
      channelCategory: []
    }
  },
  computed: {
    channelBrandIdRules() {
      const fun = (rule, value, callback) => {
        if (!this.channelInfo.channelBrandId) callback(new Error('京东品牌不能为空'))
        else callback()
      }
      return fun
    },
    initResourceIdRules() {
      const fun = (rule, value, callback) => {
        if (!this.channelInfo.shopCategories.length) callback(new Error('京东店内类目不能为空'))
        else callback()
      }
      return fun
    },
    channelCategoryRules() {
      const fun = (rule, value, callback) => {
        if (!this.channelInfo.categoryId) callback(new Error('京东平台类目不能为空'))
        else callback()
      }
      return fun
    }
  },
  async created() {
    this.getChannelTreeList()
    await this.getTreeList()
    if (Array.isArray(this.channelInfo.shopCategories)) {
      this.initResourceId = this.channelInfo.shopCategories.map((_) => getFathersById(_.shopCategoryId, this.categoryOptions, 'children', 'categoryId'))
    }
    this.$refs.bransName.brandOptions = [
      {
        channelBrandId: this.channelInfo.channelBrandId,
        channelBrandName: this.channelInfo.channelBrandName
      }
    ]
  },
  methods: {
    async getTreeList() {
      const data = { channelId: '06' }
      const { result } = await queryTreeList(data)
      this.categoryOptions = result || []
    },
    async getChannelTreeList() {
      const data = { channelId: '06' }
      const { result } = await queryChannelTreeList(data)
      this.channelOptions = result || []
      const channelCategory = getFathersById(this.channelInfo.categoryId, this.channelOptions, 'children', 'categoryId', true)
      if (!Array.isArray(channelCategory)) return
      this.channelCategory = channelCategory.map((_) => _.categoryId)
      this.channelInfo.categoryName = channelCategory.map((_) => _.categoryName).join('>')
    },
    submitForm() {
      let flag = null
      this.$refs.ruleForm.validate((valid) => {
        flag = valid
      })
      return flag
    },
    handleChange(value) {
      if (value && value.length) {
        this.channelInfo.shopCategories = handleId(
          handleId(value, 2).map((_) => {
            return getFathersById(_, this.categoryOptions, 'children', 'categoryId', true)
          }),
          2
        ).map((_) => {
          return {
            shopCategoryId: _.categoryId,
            shopCategoryName: _.categoryName
          }
        })
      } else {
        this.channelInfo.shopCategories = []
      }
    },
    spuWeightInput(e) {
      this.formData[this.increased ? 'spuWeight' : 'chgSpuWeight'] = e.match(/^\d*(\.?\d{0,3})/g)[0] || null
    },
    spuWeightChange(e) {
      if (e > 5) {
        this.$alert('商品毛重超过5KG，请核对是否正确！', {
          confirmButtonText: '确定',
          showClose: false,
          callback: () => {}
        })
      }
    }
  }
}
</script>

<style scoped lang="scss">
@import '../css/formcss';
.base-info {
  .el-row {
    margin-left: -10px !important;
  }
}

/deep/ .el-icon-question {
  font-size: 18px;
}
</style>
